<template>
	<div class="newt-wrap">
		<div class="base-info">基本信息</div>
		<div class="base-info-list">
			<div class="base-info-item">
				<div class="task-left item-right">任务名称:</div>
      <input v-model="taskDetail.name" type="text" class="base-info-state-task"  disabled="disabled"/>
			</div>
			<div class="base-info-item">
				<div class="task-left item-right">推广日期:</div>
        <div class="task-info-date">
          <input v-model="taskDetail.startTime" type="text" class="ipt-date"  disabled="disabled"/>
          <span class="date-middle">至</span>
          <input v-model="taskDetail.endTime" type="text" class="ipt-date1"  disabled="disabled"/>
        </div>
			</div>
			<div class="base-info-item-plat">
				  <div class="task-left item-right">推广内容:</div>
					<textarea v-model="taskDetail.content" type="text" class="base-info-state-task there"  disabled="disabled"/>
			</div>
			<div class="base-info-item platformName">
				<div class="task-left item-right item-plat">指定平台:</div>
					<div class="el-right-item ">
				    <input v-model="taskDetail.platformName" type="text"  disabled="disabled"/>
			  	</div>
			</div>
			<div class="base-info-item">
				<div class="task-left item-right">指定主播:</div>
				<input v-model="taskDetail.anchorName" type="text" class="base-info-state-task"  disabled="disabled"/>
			</div>
			<div class="base-info-item">
				<div class="task-left item-right">任务预算:</div>
				<input v-model="taskDetail.budget" type="text" class="base-info-state-task"  disabled="disabled"/>
			</div>
		</div>
  </div>
</template>
<script>
export default {
	async fetch({store}) {
		// await store.commit('setMyAddFans',1)
	},
	layout: "internalouts",
	data(){
		return{
			startTimeLimit:{
				disabledDate:(time) =>{	
				  return new Date(time).getTime() < Date.now() - 1 * 24 * 60 * 60 * 1000; //只能选择大于等于当天的日期
					if(this.taskDetail.endTime){
						return time.getTime() >= new Date(this.taskDetail.endTime).getTime() //结束日期要大于开始日期
					}
				},
			},
			endTimeLimit:{
				disabledDate:(time) =>{
					if (this.taskDetail.startTime) {
						return time.getTime() <= new Date(this.taskDetail.startTime).getTime() - 1 * 24 * 60 * 60 * 1000
					}
				}
			},
			taskDetail:{
				name:'', //任务名称
				startTime:'', //开始时间
				endTime:'', //结束时间
				content:'', //详情内容
				anchorName:'', //主播昵称
				budget:'', //任务预算
				platformName:'', // 平台名称
				platformId:'', //平台ID
			},
			platData:{}, //平台数据
			platName:'', //平台名称默认的
		}
	},
	methods:{
		selPlat(e){ //select下拉框change事件
			this.taskDetail.platformName = e.name //赋值name给平台名称传递过去的
			this.platName = this.taskDetail.platformName //点击切换的时候赋值
			this.taskDetail.platformId = e.id //赋值nameId给平台ID传递过去的
		},
		btnExport(){
			this.getData() //调用新建任务和修改任务的接口
		},
		taskDetails(){ //连麦涨粉-任务管理-任务详情
			if(this.$route.query.id == null){ //如果id为null,我们直接终止其操作
				return;
			}
			let params ={
				id:this.$route.query.id//有id我们就传过去
			}
			this.$axios.$post('detailContactTask',params).then(res => {
				if(res.status === 200 ){
					this.taskDetail = res.obj //拿到对应的数据设置给对应的表单即可
					this.platName = res.obj.platformName //拿到对应的平台名称设置给对应的指定平台即可
				}else{
					this.$message.warning(res.msg)
				}
			})
			.catch(error => {
				this.$message.warning('请求失败')
			})
		},
		getData(){ //新建任务新增和修改的任务的接口
			// let anchorNames = this.$route.query.name;
			// if(anchorNames == null){
			// 	anchorNames = this.taskDetail.anchorName;
			// }
			let params ={
				id:this.$route.query.id || null, //有id代表修改，没有代表新增
				name:this.taskDetail.name, 	//传递任务名称
				startTime:this.taskDetail.startTime, //传递开始时间
				endTime:this.taskDetail.endTime, //传递结束时间
				content:this.taskDetail.content, //传递任务内容
				anchorName:this.taskDetail.anchorName, //传递任务主播名称
				budget:this.taskDetail.budget, //传递任务预算
				platformName:this.platName, //传递任务平台名称
				platformId:this.taskDetail.platformId, //传递任务平台ID
			}
			this.$axios.$post('createContactTask',params).then(res => {
				if(res.status === 200 ){
					this.$message.success(res.msg)
				}else{ //走500
					this.$message.warning(res.msg)
				}
			})
				.catch(error => {
					this.$message.warning('请求失败')
				})
		},
		platCate(){ //连麦涨粉-初始化(平台，类型数据)
			let params ={
			}
			this.$axios.$post('raiseFansInit',params).then(res => {
        if(res.status === 200 ){
          this.platData = res.obj.platformList //平台数据
        }else{
          this.$message.warning(res.msg)
        }
			})
        .catch(error => {
          this.$message.warning('请求失败');
          this.loading = false;    
        })
		}
	},
	mounted(){
		this.platCate(); //调用初始化平台接口，拿到对应的平台ID和平台名字;
		this.taskDetails(); //调用任务详情接口;
	}
}
</script>

<style scoped>
  .newt-wrap{
    padding:20px;
    background:#ffffff;
    font-size:14px;
    width: 910px;
    margin: 20px auto;
  }
  .base-info{
    width:87px;
    height:18px;
    text-align:right;
    border-left:3px solid #0096e6;
    box-sizing:border-box;
    font-weight:bold;
  }
  .base-info-list{
    padding:38px 43px 14px;
  }
  .base-info-item{
    height:30px;
    display:flex;
    align-items:center;
    color:#666666;
    margin-top:24px;
  }
  .el-right-item .el-select{
    width:353px;
    height:30px;
  }
  .base-info-item-plat{
    display:flex;
    color:#666666;
    margin-top:24px;
    border:1px solid transparent;
  }
  .base-info-item-plat textarea.text-dec{
    border:1px solid transparent;
    padding:8px;
    display:block;
    box-sizing:border-box;
    color:#333333;
    border-radius:4px;
  }
  .base-info-item-plat textarea.text-dec:focus{
    border:1px solid #0096e6;
  }
  .base-info-item input{
    width:355px;
    border:1px solid transparent;
    border-radius:4px;
    text-indent:12px;
    box-sizing:border-box;
  }
  .base-info-item input:focus{
    border:1px solid #0096e6;
  }
  .task-info-date .ipt-date,.task-info-date .ipt-date1{
     width:100px;
  }
  .base-info-item  select{
    width:355px;
    border-radius:4px;
    text-indent:12px;
    height:30px;
    box-sizing:border-box;
    cursor:pointer; 
    background: url(~assets/images/sel-arrow.png) no-repeat 320px 3px;
    background-size:20px;
  }
  .plat-select{
    width:355px;
  }
  .task-left{
    width:64px;
    user-select: none;
    white-space:nowrap;
  }  
  .item-right{
    margin-right:14px;
    color:#b6b6b6;
    margin-top:3px;
  }
  .base-info-send{
    margin-top:78px;
  }
  .base-info-send .data-wrap-export{
    font-size: 14px;
    border-radius:15px;
    padding:8px 22px;
    box-sizing: border-box;
    outline: none;
    border: none;
    cursor: pointer;
    margin-left:78px;
  }
  .time-style{
    width:158px;
    position:relative;
  }
  .time-box{
    display:flex;
    align-items:center;
    position:relative;
  }
  .time-center{
    width:38px;
    height:30px;
    line-height: 30px;
    text-align:center;
  }
  .text-dec{
    width:353px;
    height:183px;
  }
  .calendar1{
    position: absolute;
    top: 12px;
    left: 130px;
  }
  .calendar2{
    position: absolute;
    top: 12px;
    right: 12px;
  }
  /* state begin */
  input{
    color:#666666;
  }
  textarea{
    resize: none;
    margin-left: 9px;
  }
  .base-info-item-plat textarea.there{
    width: 500px;
    text-align:justify;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  input,textarea{
    border:none !important;
  }
  .date-middle{
    padding:0 5px;
  }
/* state end */
/* 修改elementUI样式 */
  .item-plat{
    margin-right:14px;
    margin-top:5px;
  }
  .platformName{
    margin-top:5px !important;
  }
  /deep/ .el-icon-date::before{
    content:''
  }
  .el-right-item /deep/ .el-select .el-input .el-input__icon{
    line-height:0px;
  }
  /deep/ .base-info-item .el-input__inner{
    height:30px;
    line-height:30px;
  }
  .el-input--prefix .el-input__inner{
    padding-left:12px;
  }
</style>
